<template>
  <div id="app">

    <mt-popup v-model="$store.state.myindexshow" position="left" class="myindex">
       <v-myIndex></v-myIndex>
    </mt-popup>
    <!--首页头部-->
    <mt-header fixed title="阅享" class="head" v-show="$store.state.indexShow">
      <mt-button slot="left" @click="openid">
        <img  src="./img/icon_self@2x.png">
      </mt-button>
      <mt-button  slot="right" @click="opencity">
        成都<span class="downicon"></span>
      </mt-button>
    </mt-header>
    <!--附近头部-->
    <div class="nearHead" v-show="$store.state.nearShow">
      <mt-button  slot="left" @click="openid">
        <img  src="./img/icon_self@2x.png">
      </mt-button>
      <span class="headcenter">
        <input type="text" placeholder="书籍/ISBN/作者">
      </span>
      <mt-button  slot="right">成都<span class="downicon"></span></mt-button>
    </div>
    <!--好书头部-->
    <mt-header fiexd title="一周好书" class="good-title" v-show="$store.state.goodbookshow">
      <mt-button slot="left" @click="closegood">
        <
      </mt-button>
    </mt-header>
    <!--好书详情头部-->
    <mt-header  title="书籍详情" class="article-title" v-show="$store.state.bookArticle">
      <mt-button slot="left" @click="closeArticle">
        <
      </mt-button>
    </mt-header>
    <!--城市头部-->
    <mt-header fiexd title="当前城市-成都" class="city-title" v-show="$store.state.cityShow">
      <mt-button slot="left" @click="closecity">
        <
      </mt-button>
    </mt-header>
    <!--文化生活头部-->
    <mt-header fiexd title="文化生活" class="city-title" v-show="$store.state.lifeShow">
      <mt-button slot="left" @click="closelife">
        <
      </mt-button>
    </mt-header>
    <!--文化生活详情页头部-->
    <mt-header fiexd title="文化生活详情" class="liftArticle-title" v-show="$store.state.lifeArticleShow">
      <mt-button slot="left" @click="closelifeArticle">
        <
      </mt-button>
      <mt-button slot="right" @click="openShare" >
        <img class="share" src="./img/icon_share1@2x.png">
      </mt-button>
    </mt-header>


    <router-view> </router-view>
    <mt-tabbar v-model="selected" class="footBox" :fixed="true">
      <router-link to='/index' class="mint-tab-item" >
        <mt-tab-item>
          <img slot="icon" id="index" :src="indexImg">
          首页
        </mt-tab-item>
      </router-link>

      <router-link to='/near' class="mint-tab-item" >
       <mt-tab-item >
        <img id="ding" slot="icon" :src="dingImg">
        附近
       </mt-tab-item>
      </router-link>

      <router-link to='/find' class="mint-tab-item">
        <mt-tab-item >
          <img id="sao" slot="icon" :src="saoImg">
          扫码
        </mt-tab-item>
      </router-link>

      <router-link to='/read' class="mint-tab-item" >
        <mt-tab-item >
          <img id="read" slot="icon" :src="readImg">
          易读
        </mt-tab-item>
      </router-link>

    </mt-tabbar>
  </div>
</template>

<script>
import myIndex from "./components/myIndex/myIndex.vue"



export default {
  name: 'app',
  data(){
    return {
      indexImg:require("./img/icon_home@2x.png"),
      dingImg:require("./img/icon_near@2x.png"),
      saoImg:require("./img/icon_scan@2x.png"),
      readImg:require("./img/icon_people@2x.png")
    }
  },
  methods:{
    openid:function (){
        this.$store.dispatch('openShow','my');
      },
    closeid:function (){
      this.$store.dispatch('closeShow','my');
    },
    closegood:function (){
      this.$router.push({ path: '/index' });
      this.$store.dispatch('closeShow','good');
    },
    closeArticle:function (){
      this.$router.push({ path: '/goodbook' });
      this.$store.dispatch('closeShow','bookArticle');
    },
    opencity:function (){
      this.$router.push({ path: '/city' });
      this.$store.dispatch('closeShow','index');
      this.$store.dispatch('openShow','city');
    },
    closecity:function (){
      this.$router.push({ path: '/index' });
      this.$store.dispatch('closeShow','city');
    },
    closelife:function (){
      this.$router.push({ path: '/index' });
      this.$store.dispatch('closeShow','life');
    },
    closelifeArticle:function (){
      this.$router.push({ path: '/life' });
      this.$store.dispatch('closeShow','lifeArticle');
    },
    openShare:function (){
      var share = document.getElementById("share");
      share.style.transform="translate3d(0,0,0)";
      share.style.webkitTransform="translate3d(0,0,0)";
      share.style.MozTransform="translate3d(0,0,0)";

      this.$store.dispatch('openShow','share');
    }
  },
  watch:{
    $route(to,from){
      console.log(to.path);
      if(to.path=='/index'){
        this.indexImg=require("./img/icon_home1@2x.png");
        this.dingImg=require("./img/icon_near@2x.png");
        this.saoImg=require("./img/icon_scan@2x.png");
        this.readImg=require("./img/icon_people@2x.png");
        this.$store.dispatch('openShow','index');
      }else if(to.path=='/near'){
        this.indexImg=require("./img/icon_home@2x.png");
        this.dingImg=require("./img/icon_near1@2x.png");
        this.saoImg=require("./img/icon_scan@2x.png");
        this.readImg=require("./img/icon_people@2x.png");
        this.$store.dispatch('openShow','near');
      }else if(to.path=='/find'){
        this.indexImg=require("./img/icon_home@2x.png");
        this.dingImg=require("./img/icon_near@2x.png");
        this.saoImg=require("./img/icon_scan1@2x.png");
        this.readImg=require("./img/icon_people@2x.png");
      }else if(to.path=='/read'){
        this.indexImg=require("./img/icon_home@2x.png");
        this.dingImg=require("./img/icon_near@2x.png");
        this.saoImg=require("./img/icon_scan@2x.png");
        this.readImg=require("./img/icon_people1@2x.png");
      }
    }
  },
  components:{
    'v-myIndex':myIndex
  },
  created(){
    this.indexImg=require("./img/icon_home1@2x.png");
  }
}
</script>

<style lang="Sass">
@mixin transform ($sizing) {
    -webkit-transfrom:$sizing;
       -moz-transfrom:$sizing;
            transfrom:$sizing;
}
@mixin transition ($sizing) {
    -webkit-transition:$sizing;
       -moz-transition:$sizing;
            transition:$sizing;
}
*{margin: 0; padding: 0; font-family: 'Microsoft Yahei';}
body{background: #eee; width: 100%; height: 100%;}
#app {
  color: #2c3e50;
  height: 100%;


  .myindex{width: 15.15rem; height: 100%; overflow: hidden;}
  .head{border-bottom: .05rem solid #e8e8e8;}
  .mint-header{
    background: #fff;
    color:#333;

    .mint-button-text{

      img{
        height: .8rem;
        width: .8rem;
      }
    }
    .downicon{
      display: inline-block;
      background: url('./img/icon_adress@2x.png');
      width:.55rem;
      height: 0.35rem;
      background-size: 100% 100%;
      margin-left: .1rem;
    }

    .mint-header-title{
      font-size:.9rem;
    }
  }

  .nearHead{
    width: 100%;
    height: 2rem;
    background: #fff;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    padding: 0 .5rem;
    box-sizing:border-box;


    .mint-button{background: #fff; height: 2rem; border: none; box-shadow: none; width: auto; padding: 0;

      img{width: .8rem; height: .8rem;}
      .mint-button-text{font-size: .74rem; color: rgb(51,51,51);}
      .downicon{
        display: inline-block;
        background: url('./img/icon_adress@2x.png');
        width:.55rem;
        height: 0.35rem;
        background-size: 100% 100%;
        margin-left: .1rem;
      }
    }
    .mint-button::after{background: none;}

    .headcenter{flex:1;

      input[type=text]{
        display: block;
        background:#eee;
        width: 10rem;
        height: 1.4rem;
        margin: .3rem auto;
        border-radius: 1rem;
        outline: 0;
        padding-left: 1rem;
        border: none;
      }
      input[type=text]:focus{
        /*box-shadow:.1rem .1rem .1rem #888;*/
      }
    }
  }
  .good-title{width: 100%; border-bottom: .05rem solid #e8e8e8; background: #fff; position: fixed; left: 0; top: 0;  z-index: 10;
  }
  .article-title{width: 100%; background: #fff;}
  .city-title{width: 100%; background: #fff; position: fixed; left: 0; top: 0;}
  .liftArticle-title{width: 100%; background: #fff; position: fixed; left: 0; top: 0; border-bottom: .05rem solid #e8e8e8;

    .share{margin-top: .2rem; }
  }
  .mint-tabbar{

    z-index: 10;

    .mint-tab-item.is-selected{
        background: #fff;
        }

    .mint-tab-item-icon{

      img{
        width: auto;
      }

      #ding{
        width: auto;
        margin: 0 3px;
      }

    }
    .mint-tab-item-label{
      color: #999;
    }

  }

  .footmenu{
    width: 100%;
    height: 100%;
  }

  .footBox{
    border-top: .05rem solid #e8e8e8;
    height:2.45rem;
    transition:all 0.5s ease;  transform: translate3d(0,0,0);

    .mint-tab-item {
      padding:.1rem 0;
    }
  }
}





/*h1{color: red;}*/
</style>
